// 本组件只做一件事
// 本组件负责项目的选择
// 本组件会在加载时获取 vuex 工具中预存的默认选中项目做出改变
// 本组件会在每次项目级联选择框发生改变后通知 vuex 改变默认选中项的数据
// 本组件会在每次项目级联选择框发生改变后通知父组件出发项目改变该出发的事件,同时传出当前选中的 id。这件事执行于 vuex 改变后
<template>
  <main>
    <el-select v-model="value" placeholder="请选择项目" @change="changeFun">
      <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
  </main>
</template>

<script>
import * as api from '../api/private/project'
export default {
  data() {
    return {
      options: [],
      value: ''
    }
  },
  mounted() {
    this.getProList()
  },
  methods: {
    // 获取项目列表
    async getProList() {
      let req = {}
      let res = await api.getProList(req)
      if (res.code == 0) {
        this.options = res.data
        // 在每次项目列表获取成功后，根据 vuex 里的默认选择项选择默认值
        this.selectDefault()
      } else {
        this.$msg.error('获取项目列表失败')
      }
    },
    // 选定默认选中项
    selectDefault() {
      // 获取 vuex 中的默认选中项目id
      let defaultProject = this.$store.state.selectDefault
      // 通知页面根据最新的选中 ID 做出改变
      this.changeFun(defaultProject)
    },
    // 选中项发生改变
    changeFun(id) {
      // 页面选择项根据最新 id 做出改变
      this.value != id && (this.value = id)
      // vuex 选择项根据最新 id 做出改变
      this.$store.state.selectDefault != id &&
        this.$store.commit('setSelectProId', id)
      // 通知父页面根据最新选择项做出改变
      if (!this.$store.state.selectProId) return
      this.$emit('ProChangeFun', id)
    }
  }
}
</script>

<style>
</style>